<html>

<head>
<title>WebGL game lib</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<script type="text/javascript" src="../src/catgl.js"></script>
<script type="text/javascript" src="../src/glMatrix.js"></script>
<script type="text/javascript" src="../src/glMatrixPlus.js"></script>
<script type="text/javascript" src="../src/curve.js"></script>
<script type="text/javascript" src="../src/camera.js"></script>
<script type="text/javascript" src="../src/key.js"></script>
<script type="text/javascript" src="../src/matrixstack.js"></script>
<script type="text/javascript" src="../src/shaderManager.js"></script>
<script type="text/javascript" src="../src/actor.js"></script>
<script type="text/javascript" src="../src/framerate.js"></script>
<script type="text/javascript" src="../src/models.js"></script>
<script type="text/javascript" src="../src/mouse.js"></script>
<script type="text/javascript" src="../src/lightManager.js"></script>

<script type="text/javascript">var BlenderModel = {};</script>
<script type="text/javascript" src="../resource/stilagmate.js"></script>
<script type="text/javascript" src="../resource/snowspike.js"></script>
<script type="text/javascript" src="../resource/myMiku.js"></script>


<script type="text/javascript">
    //var BlenderExport = {};

    // Key入力の設定
    function setupKey()
    {
        var keyManager = catGL.keyManager;
        // 押した瞬間の処理
        keyManager.setDownCallback(function(c){
                var camera = catGL.camera;
                if (String.fromCharCode(c) == "I"){
                    vec3.set([0, 0, 0], camera.eye_pos);
                    vec3.set([0, 0, 1], camera.eye_rvect);
                }
                if (String.fromCharCode(c) == "A"){
                    camera.lookAt(-1.5, 0, -7.0);
                }
                //alert(c);
                });
        // 押されている間中起こる処理
       // keyManager.setIntervalCallback(15, function(){
       //         var camera = catGL.camera;
       //         // 左
       //         if (keyManager.keyPressed[37]){
       //             camera.move(-0.5,0,0);
       //         }
       //         // 右
       //         if (keyManager.keyPressed[39]){
       //             camera.move(0.5,0,0);
       //         }
       //         // 上 
       //         if (keyManager.keyPressed[38]){
       //             camera.eye_pos[1] += 0.1;
       //         }
       //         // 下
       //         if (keyManager.keyPressed[40]){
       //             camera.eye_pos[1] -= 0.1;
       //         }
       //         // PageUp
       //         if (keyManager.keyPressed[33]){
       //             camera.move(0,0,-0.5);
       //         }
       //         // PageDown
       //         if (keyManager.keyPressed[34]){
       //             camera.move(0,0,0.5);
       //         }
       //         // h
       //         if (keyManager.keyPressed[72]){
       //             camera.yaw(0.5*Math.PI/180);
       //         }
       //         // l
       //         if (keyManager.keyPressed[76]){
       //             camera.yaw(-0.5*Math.PI/180);
       //         }
       //         // j
       //         if (keyManager.keyPressed[74]){
       //             camera.pitch(0.5*Math.PI/180);
       //         }
       //         // k
       //         if (keyManager.keyPressed[75]){
       //             camera.pitch(-0.5*Math.PI/180);
       //         }
       //     });
    }

    // Mouseの機能の登録
    function setupMouse(){
        var mouseManager = catGL.mouseManager;
        var camera = catGL.camera;
        var keyManager = catGL.keyManager;
        var arg = {};

        // ホイールでカメラ前後
        arg.scrollWheel = function(delta){
            camera.move(0,0,-delta*0.05);
        }
        arg.moveMouse = function(x, y, offsetX, offsetY){
            // 左クリック状態のmouse移動
            if (mouseManager.buttonPressed[0]){
                if (keyManager.keyPressed[90]){  
                    // zキーが押されていればカメラの回転
                    camera.yaw(-offsetX * 0.1*Math.PI/180);
                    camera.pitch(offsetY * 0.1*Math.PI/180);
                } else { 
                    // 押されていなければカメラの移動
                    camera.move(offsetX * 0.01, -offsetY * 0.01, 0);
                }
            }
        }
        // センターを押すとカメラを初期値へ
        arg.downCenter = function(){
            vec3.set([0, 0, 0], camera.eye_pos);
            vec3.set([0, 0, 1], camera.eye_rvect);
        }
        mouseManager.setCallbackFunction(arg);
    }

    // 登場するアクアーの登録
    function setActors(){
        var gl = catGL.gl;
        var actorManager = catGL.actorManager;

        // character A
        //var cnvMatrix = mat4.createRotateX(-0.5*Math.PI);
        //convertModelVertex(BlenderExport.spikey, cnvMatrix);
        //var spikeyModel = createBlenderModel(BlenderExport.spikey);
        //spikeyModel.shaderId = "texture";
        var spikeyModel = createBlenderModel(BlenderModel, BlenderModel.spikey, 
                function(model){return "texture";});
        var actorSpikey = Actor.create(
                mat4.createTranslate([-10, 0, -7]),
                spikeyModel);
        actorSpikey.exec = function(){
            mat4.rotateY(this.matrix, 0.5*Math.PI/180);
        };
        actorManager.addActor(actorSpikey);

        // character B
        //convertModelVertex(BlenderExport.Sphere, cnvMatrix);
        //var sphereModel = createBlenderModel(BlenderExport.Sphere);
        var sphereModel = createBlenderModel(BlenderModel2, BlenderModel2.Sphere, 
                function(model){return "texture";});
        var actorSphere = Actor.create(
                mat4.createTranslate([10, 0, -7]),
                sphereModel);
        actorSphere.exec = function(){
            mat4.rotateY(this.matrix, 0.5*Math.PI/180);
        };
        actorManager.addActor(actorSphere);

        // Sidewalk
        //convertModelVertex(BlenderExport.Sidewalk, cnvMatrix);
        //var sidewalkModel = createBlenderModel(BlenderExport.Sidewalk);
        //var actorSidewalk = Actor.create(
        //        mat4.createI(),
        //        sidewalkModel);
        //actorManager.addActor(actorSidewalk);

        // character Miku 
        //convertModelVertex(BlenderExport.miku, cnvMatrix);
        //var mikuModel = createBlenderModel(BlenderExport.miku);
        //mikuModel.shaderId = "texture";
        var mikuModel = createBlenderModel(MyExportMiku, MyExportMiku.miku_far, 
                function(model){return "texture";});
        var actorMiku = Actor.create(
                mat4.createTranslate([1.5, 0, -7]),
                mikuModel);
        actorMiku.exec = function(){
            mat4.rotateY(this.matrix, 0.5*Math.PI/180);
        };
        actorManager.addActor(actorMiku);

        // axisモデル(三色) 
        var axisModel = createAxisModel(1);
        var actorAxis = Actor.create(
                mat4.createI(),
                axisModel);
        actorManager.addActor(actorAxis);
    }

    function appLoop() {
        // カメラのデバッグ情報の表示
        var camera = catGL.camera;
        var d0 = document.getElementById("d0");
        d0.innerHTML = camera.getMatrixString();
        var d1 = document.getElementById("d1");
        d1.innerHTML = camera.getCameraString();
    }

    function webGLStart() {
        var canvas = document.getElementById("test-canvas");

        // gl contextの初期化
        catGL.init(canvas, {
                    zfar: 1000,
                    framerate_id:"fr",
                    framerate_updateInterval: 500,
                    draw_model_axis: true,
                    axis_length: 3
                });

        // 初期カメラ位置
        vec3.set([0, 0, 30], catGL.camera.eye_pos);

        // shader managerの初期化
        var shaderManager;
        shaderManager = catGL.shaderManager;
        shaderManager.loadShader("vertex-color");
        shaderManager.loadShader("texture");
        //shaderManager.loadShader("texture-v-Light");

        // Key入力の設定
        setupKey();

        // Mouse入力の設定
        setupMouse();

        // 登場するアクターの登録
        setActors();

        // MainLoopの開始
        catGL.start(15, appLoop);
    }
    var startCamera = {};
    function button1(){
        var camera = catGL.camera;
        startCamera.pos = vec3.create(camera.eye_pos);
        startCamera.rvect = vec3.create(camera.eye_rvect);
        var d2 = document.getElementById("d2");
        d2.innerHTML = "start:<BR>" + camera.getCameraString();
    }

    var endCamera = {};
    function button2(){
        var camera = catGL.camera;
        endCamera.pos = vec3.create(camera.eye_pos);
        endCamera.rvect = vec3.create(camera.eye_rvect);
        var d3 = document.getElementById("d3");
        d3.innerHTML = "end:<BR>" + camera.getCameraString();
    }

    function button3(){
        var camera = catGL.camera;
        var time = document.getElementById("time").value;
        
        camera.addHermiteAnimation(
            parseFloat(time) || 5000, 
            startCamera.pos,
            startCamera.rvect,
            endCamera.pos,
            endCamera.rvect);

    }
</script>
</head>
<body onload="webGLStart();" onselectstart="return false;">
    <table>
        <tr>
            <td>
                <canvas id="test-canvas" style="border: none;" width="640" height="480"></canvas>
            </td>
            <td>
                <table>
                    <tr>
                        <h4>操作方法</h4>
                        カメラをマウスとキーボードから動かせます<br>
                        <ul>
                            <li>左ボタン＋マウス移動：カメラの移動</li>
                            <li>（Zキー押しながら）左ボタン＋マウス移動：カメラの向きの変更</li>
                            <li>マウスのホイール操作：カメラの前後の移動</li>
                            <li>マウスの真ん中ボタン：カメラを初期位置へ戻す</li>
                            <li>i：カメラを初期位置へ戻す</li>
                            <li>a：キャラクターの方を向く</li>
                        </ul>
                        <p>
                        下のボタンから現在のカメラを、カメラアニメーションの開始と終了として登録できます。<br>
                        カメラの移動完了までに掛かる時間も変更できます。<br>
                        (大きい数字ほどゆっくりと動きます)<br>
                        移動開始ボタンを押すとカメラの移動が始まります。<br>
                    </tr>
                    <tr><h5>カメラ情報</h5></tr>
                    <tr><div id="d0"></div></tr>
                    <tr><div id="d1"></div></tr>
                </table>
            </td>
        </tr>
    </table>
  <p>
  <div id="fr"></div>
  <input type="button" id="button1" value="開始カメラ保存" onclick="button1()"> 
  <input type="button" id="button2" value="終了カメラ保存" onclick="button2()">
  移動時間<input type="text" id="time" value="5000">
  <input type="button" id="button3" value="カメラ移動開始" onclick="button3()">
  <p>
  <div id="d2"></div>
  <div id="d3"></div>
</body>
</html>

